<template>
  <div style="background-color: white; height: 90%; display: flex; flex-direction: column; justify-content: space-between;">
    <div>
      <el-table :data="filterTableData">
        <el-table-column label="日期" prop="date" />
        <el-table-column label="姓名" prop="name" />
        <el-table-column align="right">
          <template #header>
            <el-input v-model="search" size="small" placeholder="Type to search" />
          </template>
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex; justify-content: flex-end;">
      <el-pagination
        :page-size="20"
        :pager-count="11"
        layout="prev, pager, next"
        :total="120"
      />
    </div>
  </div>


  </template>
  
  <script setup>
  import { computed, ref } from 'vue'
  import { userListFn } from '@/api/user'
  const tableData = ref([])
  const filterTableData = ref([

  ])
  
  const search = ref('')

  const getData = async () => {
    const res = await userListFn()
    console.log(res)
    filterTableData.value = res.data.result
}
getData()

  const handleEdit = (index, row) => {
    console.log(index, row)
  }
  const handleDelete = (index, row) => {
    console.log(index, row)
  }

  </script>

<style scoped>
  .el-input{
    height: 30px;
    width: 200px;
  }
  .el-table thead{
    height: 60px;
  }
</style>
  